<template>
  <div class="problemList bg-f2">
    <div class="problem-R noControlPanel bg-fff">
      <!-- 搜索条件 -->
      <el-form :inline="true" :model="searchCriteria">
        <el-form-item multiple label="问题类型:">
          <el-select placeholder="选择问题" filterable :no-data-text="tiText1" clearable v-model="searchCriteria.region">
            <el-option v-for="item in lbmcOptions" :key="item.value" :label="item.label" :value="item.value"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item multiple label="设备类型:">
          <el-cascader v-model.trim="searchCriteria.typeVal" :options="zicanOptions" :props="{ checkStrictly: true }" filterable clearable></el-cascader>
        </el-form-item>
        <el-form-item label="加入日期:">
          <el-date-picker
            v-model="searchCriteria.dataTime"
            :picker-options="pickerBeginDateBefore"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            value-format="yyyy-MM-dd"
          ></el-date-picker>
        </el-form-item>
        <el-form-item>
          <el-input v-model.trim="searchCriteria.namer" prefix-icon="el-icon-search" clearable placeholder="输入设备名称/设备IP"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit2()" class="btnSizeStyle">查询</el-button>
        </el-form-item>
        <!-- <el-form-item><el-button class="btnClass">导出</el-button> </el-form-item>
        <el-form-item><el-button class="btnClass">打印</el-button> </el-form-item>-->
      </el-form>
      <!-- <el-card class="el-card-problem"> -->
      <el-table
        :header-cell-style="{ backgroundColor: '#ECF3FC', color: '#333', height: '48px', borderBottom: '1px solid #CEE1F7' }"
        ref="multipleTable"
        :data="problemList"
        @select="isCheck"
        @select-all="isCheckAll"
        @row-dblclick="rowClick"
        style="width: 100%"
        :default-sort="{ prop: 'zcmc' }"
        border
        highlight-current-row
        stripe
        v-loading="tableLoad"
        @sort-change="sortthiscolumn"
      >
        <!-- 提示语句 -->
        <template slot="empty">{{ tableMessage }}</template>

        <el-table-column type="selection" width="45"></el-table-column>
        <el-table-column type="index" label="序号" min-width="50" align="center"></el-table-column>
        <el-table-column prop="zcmc" min-width="120" label="设备名称" sortable :show-overflow-tooltip="true">
          <template slot-scope="item">
            <span class="deviceName">{{ item.row.zcmc }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="jurisdiction" min-width="150" label="安装地址" :show-overflow-tooltip="true">
          <template slot-scope="item">
            <span class="deviceName">{{ item.row.zcsfmc + item.row.zccsmc + item.row.zcqxmc + item.row.zcjdmc + item.row.xxdz }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="ip" min-width="120" label="设备IP"></el-table-column>
        <el-table-column prop="zclxmc" min-width="120" label="设备类型"></el-table-column>
        <!-- <el-table-column prop="lbmc" min-width="200" label="问题类型" :show-overflow-tooltip="true"></el-table-column> -->
        <el-table-column min-width="200" label="问题类型" :show-overflow-tooltip="true">
          <template slot-scope="scope">
            <span>{{ scope.row.lbmcs ? scope.row.lbmcs + ' / ' : '' }}</span>
            <span>{{ scope.row.lbmc }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="tjsj" min-width="150" label="加入时间" sortable>
          <template slot-scope="scope">
            <span class="deviceName">{{ scope.row.tjsj | dateFormat }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="czrmc" min-width="90" label="操作人"></el-table-column>
        <el-table-column fixed="right" min-width="80" label="操作" align="right">
          <template slot-scope="scope">
            <div class="operations">
              <el-button type="text" size="small" class="color_f56f6f" :disabled="!quanxianBtns.btn1" @click="isDelete(scope.row.id, '移除')">移除</el-button>
            </div>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页 -->
      <el-row class="page-row">
        <el-col :span="12">
          <el-button type="danger" @click="delBtn('批量移除')" v-if="quanxianBtns.btn1" class="btnSizeStyle" :disabled="deleteAll.length > 0 ? false : true">批量移除</el-button>
        </el-col>
        <el-col :span="12" style="height: 47px; display: table">
          <el-pagination
            background
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage"
            :page-sizes="[10, 20, 30, 50]"
            :page-size="pageSize"
            layout="total, sizes, prev, pager, next"
            :total="total"
          ></el-pagination>
        </el-col>
      </el-row>
    </div>
    <!-- 提示窗 -->
    <el-dialog :title="title" :visible.sync="dialogVisible" width="576px">
      <span style="color: #5a5e66" v-html="tips"></span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="cancelBtn" class="btnSizeStyle">取 消</el-button>
        <el-button type="primary" @click="defineBtn(title)" class="btnSizeStyle" v-preventReClick>确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import '@/assets/scss/problemList.scss'
import '@/assets/scss/footer.scss'
import { yeWu, ziC } from '@/utils/allUrl.js'
// import { endLoading } from '@/utils/loading.js'
import { getUrl } from '@/utils/getUrl.js'
import { timeLoad, tableMessageText } from '@/assets/js/setTime'
export default {
  data: function () {
    return {
      searchCriteria: {
        region: '',
        typeVal: '',
        dataTime: '',
        namer: '',
      },
      problemList: [],
      currentPage: 1,
      pageSize: 10,
      total: 0,
      // 联级选择器
      zicanOptions: [], // 资产类型
      lbmcOptions: [],
      selectArea: '',
      // 上传文件
      fileList: [],
      tips: '',
      dialogVisible: false,

      // 批量
      deleteAll: [],
      // 单个
      deleteId: '',
      title: '',
      pickerBeginDateBefore: {
        // 设置只能选择到今天及以前的日期
        disabledDate(time) {
          return time.getTime() >= Date.now()
        },
      },
      quanxianBtns: {
        btn1: false,
      },
      tableLoad: false,
      tableTimer: null,
      tableMessage: '',
      tiText1: '暂无数据', // 问题类型提示
      listQuery: {
        sortby: '',
        order: '',
      },
    }
  },
  watch: {
    tableLoad(newVal, oldVal) {
      this.tableTimer = setTimeout(() => {
        if (this.tableLoad) {
          this.tableLoad = false
          this.problemList = []
          this.tableMessage = tableMessageText
          // this.total = 0
        }
      }, timeLoad)
    },
  },
  created: function () {
    this.jurisdictionBtn()
    // 获取数据
    this.getshuju()
    // 获取资产类型
    this.getzican()
    // 获取问题类型
    this.getwenti()
  },
  methods: {
    // 获取按钮权限
    jurisdictionBtn() {
      const menus = JSON.parse(getUrl('jurisdiction'))
      menus.forEach((item) => {
        if (item.qxdm === 'YWZX_WTGL_WTBMD') {
          item.children.forEach((item2) => {
            console.log(item2)
            if (item2.qxdm === 'wtbmd:deleteMoreWenTiBaiMingDan') {
              this.quanxianBtns.btn1 = true // 移除问题白名单
            }
          })
        }
      })
    },
    getshuju() {
      clearTimeout(this.tableTimer)
      this.tableLoad = true
      const params = new URLSearchParams()
      params.append('sort', 'ASC')
      params.append('order', 'id')
      params.append('M_', this.currentPage)
      params.append('N_', this.pageSize)
      this.setList(params)
    },
    async setList(params) {
      this.deleteAll = []
      const { data: res } = await this.$http.post(`${yeWu}wtbmd/selectWenTiBaiMingDan`, params)
      switch (res.code) {
        case '0000':
          this.problemList = res.data.list
          this.total = res.data.countList
          break
        default:
          this.problemList = []
          this.total = 0
          this.tableMessage = res.message
          break
      }
      this.tableLoad = false // 表格加载中样式
    },
    // 获取资产
    async getzican() {
      const params = new URLSearchParams()
      params.append('FLXID', 0)
      const { data: res } = await this.$http.post(`${ziC}zczd/list`, params)
      if (res.code !== '0000') {
        this.zicanOptions = []
        this.$message({
          type: 'error',
          message: '设备类型' + res.message,
          center: true,
        })
      } else {
        const city = JSON.stringify(res.data.list)
        const newCity = city.replace(/id/g, 'value')
        const cityList = newCity.replace(/lxmc/g, 'label')
        this.zicanOptions = JSON.parse(cityList)
      }
    },
    async getwenti() {
      const params = new URLSearchParams()
      params.append('FLBISNULL', 0)
      const { data: res } = await this.$http.post(`${yeWu}wtgzzd/selectWenTiGuZhangZiDian`, params)
      if (res.code !== '0000') {
        this.lbmcOptions = []
        this.tiText1 = res.message
      } else {
        res.data.list.forEach((item) => {
          const k = {
            value: item.id,
            label: item.lbmc,
          }
          this.lbmcOptions.push(k)
        })
      }
    },
    // 勾选
    isCheck(selection, row) {
      const arrs = []
      selection.forEach((item) => {
        arrs.push(item.id)
      })
      const s1 = new Set(arrs)
      this.deleteAll = [...s1]
    },
    // 全选
    isCheckAll(selection, row) {
      const arrs = []
      selection.forEach((item) => {
        arrs.push(item.id)
      })
      const s1 = new Set(arrs)
      this.deleteAll = [...s1]
    },
    rowClick(row, column, event) {
      const a = this.deleteAll.findIndex((item) => item === row.id)
      if (a !== -1) {
        this.deleteAll.splice(a, 1)
        this.$refs.multipleTable.toggleRowSelection(row, false)
      } else {
        this.deleteAll.push(row.id)
        const s1 = new Set(this.deleteAll)
        this.deleteAll = [...s1]
        this.$refs.multipleTable.toggleRowSelection(row, true)
      }
    },
    onSubmit2() {
      this.currentPage = 1
      this.pageSize = 10
      this.onSubmit()
    },
    sortthiscolumn(column) {
      // 排序
      this.tableLoad = true // 加载中样式
      if (column.order === 'descending') {
        this.listQuery.sortby = column.prop.toUpperCase()
        this.listQuery.order = 'DESC' // 降序
      } else if (column.order === 'ascending') {
        this.listQuery.sortby = column.prop.toUpperCase()
        this.listQuery.order = 'ASC' // 升序
      } else {
        this.listQuery.sortby = ''
        this.listQuery.order = '' // 没有排序
      }
      this.onSubmit()
    },
    onSubmit() {
      const { region, typeVal, dataTime, namer } = this.searchCriteria
      const params = new URLSearchParams()
      // params.append('sort', 'ASC')
      // params.append('order', 'id')
      params.append('M_', this.currentPage)
      params.append('N_', this.pageSize)
      if (dataTime) {
        params.append('TJSJStart', dataTime[0])
        params.append('TJSJEnd', dataTime[1])
      }
      params.append('ZCLX', typeVal[typeVal.length - 1] || '')
      params.append('WTLXBM', region || '')
      params.append('ZCMC', namer)
      params.append('order', this.listQuery.sortby) // 排序字段
      params.append('sort', this.listQuery.order) // DESC降序 ASC升序
      this.setList(params)
    },
    handleSizeChange(val) {
      this.currentPage = 1
      this.pageSize = val
      this.onSubmit()
    },
    handleCurrentChange(val) {
      this.currentPage = val
      this.onSubmit()
    },
    isDelete(id, title) {
      this.tips = '确定移除白名单？'
      this.title = title
      this.dialogVisible = true
      this.deleteId = id
    },
    async defineBtn(title) {
      const params = new URLSearchParams()
      if (title === '移除') {
        params.append('ids', this.deleteId)
        const { data: res } = await this.$http.post(`${yeWu}wtbmd/deleteMoreWenTiBaiMingDan`, params)
        if (res.code === '0014') {
          return
        } else if (res.code !== '0000') {
          return this.$message({
            type: 'error',
            message: res.message,
            center: true,
          })
        }
        this.getshuju()
        this.dialogVisible = false
        this.$message({
          type: 'success',
          message: res.message,
          center: true,
        })
      } else {
        params.append('ids', this.deleteAll)
        const { data: res } = await this.$http.post(`${yeWu}wtbmd/deleteMoreWenTiBaiMingDan`, params)
        if (res.code === '0014') {
          return
        } else if (res.code !== '0000') {
          return this.$message({
            type: 'error',
            message: res.message,
            center: true,
          })
        }
        this.getshuju()
        this.dialogVisible = false
        this.$message({
          type: 'success',
          message: res.message,
          center: true,
        })
        this.deleteAll = []
        this.$refs.multipleTable.clearSelection()
      }
    },
    cancelBtn: function () {
      this.dialogVisible = false
    },
    delBtn(title) {
      this.tips = `<svg
          class="iconfont"
          aria-hidden="true"
          style="width: 20px;height: 20px;vertical-align: middle;padding-right: 5px;"
        >
          <use xlink:href="#el-icon-mywarning" style="font-size:50px" />
        </svg>确定批量移除白名单？`
      this.dialogVisible = true
      this.title = title
    },
  },
}
</script>
<style lang="scss" scoped>
.operateBtn {
  // width: 54px;
  // height: 28px;
  background: none;
  color: #f56c6c;
}
.btnClass {
  background: rgba(232, 243, 255, 1);
  border: 1px solid rgba(163, 208, 253, 1);
  color: #1c89fa;
}
.problemList .problem-R.noControlPanel {
  padding: 15px;
}
</style>
